<template>
  <div class="index-container">
    <van-nav-bar title="热力榜单" ref="nav" />
    <div class="container" v-bind:style="{ height: `calc(${innerHeight}px - ${navBarHeight}px - ${tabBarHeight}px)` }">
      <div class="top3" ref="top3" v-bind:style="{ marginTop: `${navBarHeight}px` }">
        <div class="twoContainer" style="position: relative">
          <img
            src="../../assets/img/hot/podium1.png"
            alt=""
            style="height: 84px; width: 9px; position: absolute; right: 0"
            class="twoContainer-img"
          />
          <img src="../../assets/img/hot/triangle1.png" alt="" class="img1" style="" />
        <div class="title">{{rankingListTwo.name}}</div>
          <div class="score">{{rankingListTwo.heat_num}}</div>
          <div class="look" @click="goDetail(rankingListTwo.id)">
            <div>查看</div>
          </div>
        </div>
        <div class="oneContainer">
             <img
            src="../../assets/img/hot/podium2.png"
            alt=""
            style="height: 84px; width: 9px; position: absolute; right: 0"
            class="twoContainer-img"
          />
          <img src="../../assets/img/hot/triangle2.png" alt="" class="img2" />
             <div class="title">{{rankingListOne.name}}</div>
                <div class="score">{{rankingListOne.heat_num}}</div>
          <div class="look" @click="goDetail(rankingListOne.id)">
            <div>查看</div>
          </div>
        </div>
        <div class="threeContainer" style="position: relative">
          <img
            src="../../assets/img/hot/podium2.png"
            alt=""
            style="height: 84px; width: 9px; position: absolute; right: 0"
            class="twoContainer-img"
          />
          <img src="../../assets/img/hot/triangle3.png" alt="" class="img3" />
             <div class="title">{{rankingListThree.name}}</div>
               <div class="score">{{rankingListThree.heat_num}}</div>
          <div class="look" @click="goDetail(rankingListThree.id)">
            <div>查看</div>
          </div>
        </div>
      </div>

      <div v-bind:style="{ height: `${heighte} ${tabBarHeight}px )` }">
        <div class="bg-line">
          <div class="tran-line"></div>
        </div>
        <div class="ranking" v-bind:style="{ height: `${heighte} ${tabBarHeight}px - 10px - 20px)` }">
          <div v-bind:style="{ height: `${heighte} ${tabBarHeight}px - 10px - 20px - 20px - 20px)` }">
            <div class="ranking-title">
              <div class="item tl w16">排行</div>
              <div class="item tc ml2">分行</div>
              <div class="item tc ml2">热力值</div>
               <div class="item tc ml8">详情</div>
            </div>
            <div class="hr"></div>
            <div class="ranking-items" ref="wrapper">
              <div class="items">
                <div>
                  <div  v-for="(item, index) in rankingList" :key="index"  >
                    <div class="ranking-item" v-if="index > 2">
                      <div class="item tl w16">
                        <div class="img">
                          {{ index +1 }}
                        </div>
                      </div>
                      <div class="chung item tc ml2">
                        {{ item.name }}
                      </div>
                      <div class="chung item tc ml2">
                        {{ item.heat_num }}
                      </div>
                      <div class="add-like item tr" @click="goDetail(item.id)">查看</div>
                    </div>
                  </div>
                  <div class="pullup-tips">
                    <div v-if="!isPullUpLoad" class="before-trigger">
                      <span class="pullup-txt">加载完毕</span>
                    </div>
                    <div v-else class="after-trigger">
                      <van-loading size="24px">加载中...</van-loading>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompetitonRank } from '@/api/user.js'
import BScroll from '@better-scroll/core'
import { mapGetters } from 'vuex'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)

export default {
  data() {
    return {
      isPullUpLoad: false,
      data: 30,
      navBarHeight: 0,
      heighte: 0,
      top3Height: 0,
      i: 0,
      innerHeight: 0,
      rankingList: [],
      rankingListOne: {},
      rankingListTwo: {},
      rankingListThree: {}
    }
  },
  computed: {
    ...mapGetters(['tabBarHeight'])
  },
  mounted() {
    this.init()
    this.navBarHeight = this.$refs.nav.$el.offsetHeight // 获取组件元素高度
    this.top3Height = this.$refs.top3.offsetHeight // 获取普通元素高度
    console.log(this.tabBarHeight)
    console.log(this.top3Height)
    this.innerHeight = window.innerHeight
    this.heighte = `calc(${this.innerHeight}px - ${this.top3Height}px - ${this.navBarHeight}px - `
    this.getRank()
  },
  beforeDestroy() {
    this.bs.destroy()
  },
  methods: {
    // 获取榜单列表
    getRank() {
      getCompetitonRank().then((res) => {
        if (res.code === 200) {
          const datas = res.data
          this.rankingList = datas
          this.rankingListOne = datas[0]
          this.rankingListTwo = datas[1]
          this.rankingListThree = datas[2]
          console.log(datas, 'datas')
        }
      }).catch(() => {})
    },
    goDetail(id) {
      this.$router.push({
        path: '/ranking/detail',
        query: { id: id }
      })
    },

    init() {
      this.$nextTick(() => {
        console.log(this.$refs.wrapper, 'oo')
        if (this.$refs.wrapper) {
          console.log(this.$refs.wrapper)
          this.bs = new BScroll(this.$refs.wrapper, {
            scrollY: true,
            probeType: 3,
            stopPropagation: true,
            click: true,
            bounce: true,
            pullUpLoad: true,
            threshold: 0,
            deceleration: 0.006
          })
          this.bs.on('pullingUp', this.pullingUpHandler)
        }
      })
    },

    async pullingUpHandler() {
      this.isPullUpLoad = true
      await this.requestData()
      this.bs.finishPullUp()
      this.bs.refresh()
      this.isPullUpLoad = false
    },
    async requestData() {

    },
    ajaxGet(/* url */) {
      return new Promise(resolve => {
        setTimeout(() => {
        }, 1000)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding-left: 15px;
  padding-right: 15px;
  background: linear-gradient(180deg, #E71C5B 0%, #F9364B 20.98%, #FB7043 47.69%, #FFC355 80.55%, #C4F290 96.39%);

  .img1 {
    width: 58px;
    // height: 37px;
    margin-top: -15px;
  }

  .img2 {
    width: 75px;
    // height: 62px;
    margin-top: -22px;
    position: relative;
    z-index: 2;
  }

  .img3 {
    width: 58px;
    // height: 37px;
    margin-top: -15px;
    position: relative;
  }
}

.bg-line {
  height: 20px;
  background: #ff9f57;
  opacity: 1;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top3 {
  display: flex;
  align-items: flex-end;
  padding-top: 36px;
  padding-bottom: 10px;
}

.tran-line {
  width: 90%;
  height: 14px;
  background: #c11a00;
  opacity: 1;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
}

.title {
  font-size: 12px;
  font-family: SourceHanSansCN-Regular-GBpc-EUC-H;
  color: #5b5b5b;
  opacity: 1;
  margin-top: 12px;
  position: relative;
}

.score {
  font-size: 20px;
  font-family: SourceHanSansCN-Regular-GBpc-EUC-H;
  color: #ea0000;
  opacity: 1;
  margin-bottom: 4px;
  margin-top: 1px;
  position: relative;
}

.oneContainer {
  width: 39.47%;
  height: 173px;
  // background: #ffffff;
  opacity: 1;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
    .twoContainer-img{
    width: 100% !important;
    height: 120px !important;
    bottom: 0px !important;
  }

}

.twoContainer {
  width: 30.53%;
  height: 142px;
  // background: #ffffff;
  opacity: 1;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
    .twoContainer-img{
    width: 100% !important;
    height: 100px !important;
    bottom: 0px !important;
  }
  .img1{
    position: relative;
    z-index: 2;
  }

}

.threeContainer {
  width: 30.53%;
  height: 142px;
  // background: #ffffff;
  opacity: 1;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
    .twoContainer-img{
    width: 100% !important;
    height: 100px !important;
    bottom: 0px !important;
  }
}

.look {
  width: 55px;
  height: 23px;
  border: 1px solid #F61E51;
  opacity: 1;
  border-radius: 11px;
  font-size: 12px;
  font-family: SourceHanSansCN-Normal-GBpc-EUC-H;
  color: #F61E51;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ranking {
  background-color: #ffffff;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  margin: -15px 20px;
  margin-bottom: 0;
}

.items {
  padding: 9px 28px 11px 33px;
}
.hr{
  height: 2px;
  background: #F61E51;
  margin: 0px 20px;
}
.ranking-title {
  position: sticky;
  z-index: 838;
  top: 0;
  background-color: #fff;
  padding: 11px 33px 0;
  display: flex;
  font-size: 13px;
  font-family: SourceHanSansCN-Medium-GBpc-EUC-H;
  color: #000000;
  opacity: 1;
  padding-bottom: 10px;
  padding-right: 8px;
  .item {
    width: 28%;
    color: #000000;
    font-weight: 600;
  }
  .ml8{
    margin-left: 16px;
  }
}

.ranking-items {
  height: 100%;
}

.ranking-item {
  font-size: 12px;

  .item {
    width: 28%;

  }

  .img {
    width: 25px;
    height: 20px;
    height: auto !important;
    background-image: url(../../assets/img/hot/资源12.png);
    background-size: 100% 100%;
    // border-radius: 50%;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 2;
  }

  .add-like {
    font-size: 12px;
    font-family: SourceHanSansCN-Light-GBpc-EUC-H;
    color: #ea0000;
    opacity: 1;
  }
}

.chung {
  color: #5b5b5b;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.w16 {
  width: 16% !important;
}

.ml2 {
  margin-left: 6px;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
      padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: dashed 1px #F2C9BB;
      height: 20px;
}

.pic-live {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 91px;
  color: #ffffff;
  height: 24px;
  background: linear-gradient(90deg, #ffaf00 0%, #ff9e00 13%, #ff6e00 52%, #ff5100 83%, #ff4600 100%);
  opacity: 1;
  border-radius: 6px;
}

.pullup-tips {
  text-align: center;

  .pullup-txt {
    color: #969799;
    font-size: 14px;
  }
}
</style>
